<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>画一只卡比兽</title>
</head>
<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    *::after,*::before{box-sizing: border-box;}
    .skin{
        position: absolute;
        transform: translateX(-50%);
        left: 65%; 
        top: 20px;
    }    
    #demo{
        position: fixed;
        width:400px;
        height: 100vh;
        overflow: auto;
        padding-left: 5px;
        margin-top: 5px
    }
    #demo::-webkit-scrollbar{
        display: none;
    }
    #buttons{
        position: absolute;
        top: 20px;
        left: 54%;
    }
    #buttons button{
        width:100px;
        height: 30px;
        border: none;
        border-radius: 5px;
        background-color: rgb(52, 109, 121);
        box-shadow: 0px 0px 2px #fff;
        color: #fff;
        cursor: pointer;
    }
    #buttons button:hover{
        background-color: rgb(37,79,87) !important;
        color: #fff;
    }
    .checked{
        background-color: rgb(37,79,87) !important;
        color: #fff;
    }
    #btnPlay{
        margin: 0 10px ;
    }

    /* 媒体查询，手机端更换布局 */
    @media (max-width:500px) {
        .skin{
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            top: 220px;
        }    
        #demo{
            position: fixed;
            width:100%;
            height: 280px;
            overflow: hidden;
        }
        #demo::-webkit-scrollbar{
            display: none;
        }

        #buttons{
            position: absolute;
            width: 70px;
            top: 60px;
            left: 82%;
        }
        #buttons button{
            width:60px;
            height: 30px;
            border: none;
            background-color: rgb(52, 109, 121);
            box-shadow: 0px 0px 2px #fff;
            color: #fff;
            margin: 10px 0;
            cursor: pointer;
        }
    }
</style>
<style id="style"></style>
<body>
    <div id="demo"></div>
    <div id="buttons">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSpeed">速度 1x</button>
    </div>
    <div class="skin">
        <div class="head">
            <div class="ear ear-left"></div>
            <div class="ear ear-right"></div>
            <div class="face">
                <div class="eye eye-left"></div>
                <div class="eye eye-right"></div>
                <div class="mouth"></div>
            </div>
        </div>
        <div class="body">
            <div class="belly"></div>
            <div class="hand hand-left"></div>
            <div class="hand hand-right"></div>
            <div class="footer footer-left">
                <div class="arch"></div>
            </div>
            <div class="footer footer-right">
                <div class="arch"></div>
            </div>
        </div>
    </div>
</body>
<script src="dynamic.js"></script>
</html>